<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>websocket demo</title>
</head>
<script src="jquery-3.4.1.min.js"></script>
<script>
    var socket;
    function openSocket() {
        if(typeof(WebSocket) == "undefined") {
        	console.log("Your browser does not support websocket");
        }else{
            var socketUrl="ws://localhost:8250/ws/2?ticket=1&uid="+$("#userId").val();
            if(socket!=null){
                socket.close();
                socket=null;
            }
            socket = new WebSocket(socketUrl);
            
            socket.onopen = function() {
                console.log("websocket open");
            };
            
            socket.onmessage = function(msg) {
            	var data = msg.data;
                console.log(data);
                showMsg(JSON.parse(data));
            };
            
            socket.onclose = function() {
                console.log("websocket close");
            };
            
            socket.onerror = function() {
                console.error("websocket error");
            }
        }
    }
    function closeSocket() {
	    if(socket!=null){
	        socket.close();
	        socket=null;
	    }
    }
    function showMsg(data) {
    	var text = "<div";
    	if(data.privateChat) {
    		text += " style='color:blue'>";
    	} else {
    		text += ">";
    	}
    	text += data.time + "：【" + data.sender +"】 say：" + data.message + "</div>";
    	$("#output").prepend(text);
    }
    function sendMessage() {
        if(typeof(WebSocket) == "undefined") {
            console.log("Your browser does not support websocket");
        }else {
        	var msg = $("#contentText").val();
        	if(!msg) {
        		alert("please input message");
        		return false;
        	}
        	var obj = new Object();
        	obj.message = msg;
        	socket.send(JSON.stringify(obj));
        }
    }
    function sendUserMessage() {
    	var toUser = $("#toUser").val();
    	if(!toUser) {
    		alert("please input to user id");
    		return false;
    	}
    	var msg = $("#contentText").val();
    	if(!msg) {
    		alert("please input message");
    		return false;
    	}
    	var obj = new Object();
    	obj.toUserId = toUser;
    	obj.message = msg;
    	socket.send(JSON.stringify(obj));
    }
    function dateFormat(fmt, date) {
        let ret;
        let opt = {
            "Y+": date.getFullYear().toString(),
            "m+": (date.getMonth() + 1).toString(),
            "d+": date.getDate().toString(),
            "H+": date.getHours().toString(), 
            "M+": date.getMinutes().toString(),
            "S+": date.getSeconds().toString()
        };
        for (let k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
                fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            };
        };
        return fmt;
    }
</script>
<body>
<a href="index.html"><h4>other websocket demo</h4></a>
<div>【my userId】：<input id="userId" type="text" value=""><button onclick="openSocket()">open socket</button><button onclick="closeSocket()">close socket</button></div>
<div>【message】：<input id="contentText" type="text" value="hello"></div>
<div><button onclick="sendMessage()">send</button></div>
<div>【to userId】：<input id="toUser" type="text" value=""><button onclick="sendUserMessage()">send</button></div>
<div id="output" style="background-color: #000000; color: #FFFFFF; max-height: 500px; overflow: scroll;"></div>
</body>
</html>